<template>
  <view class="choose-products pa-10 br-10" @click.stop="toSelectedList">
    <view class="disFlxCC fz-12">
      <view class="py-22 addBtn">
        <text>{{ modelValue?.length ? `已选择 ${modelValue?.length} 个产品` : '请选择' }}</text>
        <text class="ant-iconfont fz-12 ml-5">&#xe77e;</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { navigateTo } from '@/router';
  import { propTypes } from '@/utils/propTypes';
  import { type PropType } from 'vue';

  const props = defineProps({
    modelValue: {
      type: Array as PropType<number[]>,
      default: () => [],
    },
    memberLeadingId: propTypes.number,
  });

  const emit = defineEmits(['update:modelValue']);

  function toSelectedList() {
    navigateTo({
      name: 'selectedProductsList',
      options: {
        selectedIds: props.modelValue,
        memberLeadingId: props.memberLeadingId,
        success: (ids) => {
          emit('update:modelValue', ids);
        },
      },
    });
  }
</script>

<style lang="scss" scoped>
  .choose-products {
    background-color: #f8f8f8;
    .addBtn {
      color: #2878ff;
    }
  }
</style>
